<template>
  <div class="box-content">
    <div class="box-content-header">
      <p>近期异常事件</p>
    </div>
    <div class="box-content-body">
      <div class="grid-line" v-for="(item, index) in tableData" :key="index">
        <div>
          <scroll-text :text="item.deviceName" />
        </div>
        <div>
          <scroll-text :text="item.content" />
        </div>
        <div>
          <scroll-text :text="item.informRecord" />
        </div>
        <div>
          <scroll-text :text="item.createdAt" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getRecentException } from '@/api'
import scrollText from '@/components/scroll-text'
export default {
  components: {
    'scroll-text': scrollText
  },
  watch: {
    companyId() {
      this.init()
    }
  },
  props: {
    companyId: {
      type: String,
      default: ''
    }
  },
  data: () => ({
    tableData: []
  }),
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const vm = this
      const companyId = vm.companyId
      if (!companyId) return
      const params = { companyId }
      const { code, data } = await getRecentException(params)
      if (code !== 200) return
      this.tableData = data.map(t => {
        t['createdAt'] = vm
          .moment(t.createdAt * 1000)
          .format('YYYY-MM-DD HH:mm:ss')
        return t
      })
    }
  }
}
</script>